<template>
    <div>
        <h2>{{ $route.query.name }}</h2>

        <el-steps :active="active" simple>
            <el-step title="基本信息">
                <template #icon>
                    <div class="step-number">1</div>
                </template>
            </el-step>
            <el-step title="关卡学习内容设置"></el-step>
            <el-step title="任务设置"></el-step>
        </el-steps>
        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
</template>

<script>
export default {
    name: 'ProfilePage',
    data() {
        return {
            active: 0
        }
    },
    methods: {
        next() {
            if (this.active++ > 2) return;
        }
    }

}
</script>

<style lang="scss" scoped>
.step-numbe{
    width: 30px;

}
</style>